<template lang="">
  <div>
    <section class="main">
      <input
        id="toggle-all"
        class="toggle-all"
        type="checkbox"
        v-model="checkAll"
      />
      <label for="toggle-all">Mark all as complete</label>
      <ul class="todo-list">
        <!-- `editing`  and `completed`  -->
        <li
          :class="{ completed: item.done, editing: item.id === editId }"
          v-for="item in list"
          :key="item.id"
        >
          <div class="view">
            <!-- <input class="toggle" type="checkbox" checked v-model="item.done" /> -->
            <input
              class="toggle"
              type="checkbox"
              :checked="item.done"
              @change="statusChange(item.id)"
            />
            <label @dblclick="showEdit(item.id)">{{ item.name }}</label>
            <button class="destroy" @click="del(item.id)"></button>
          </div>
          <input class="edit" :value="item.name" @keyup.enter="hideEidt" v-myFocus />
        </li>
      </ul>
    </section>
  </div>
</template>
<script>
export default {
  props: ["list"],
  data() {
    return {
      editId: -1,
    };
  },
  methods: {
    // 删除
    del(id) {
      this.$emit("onDel", id);
    },
    // 确认框
    statusChange(id) {
      console.log(id);
      this.$emit("changeStatus", id);
    },
    // 双击输入框显示
    showEdit(id) {
      this.editId = id;
    },
    // 双击输入框隐藏
    hideEidt(e) {
      console.log(this.editId, e.target.value);
      this.$emit("onEdit", this.editId, e.target.value);
      this.editId = -1;
    },
  },
  computed: {
    checkAll: {
      // 实现全选
      set(value) {
        this.$emit("allCheck", value);
      },
      // 实现反选
      get() {
        return this.list.every((v) => v.done);
      },
    },
  },
};
</script>
<style lang=""></style>
